<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生选课系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>学生选课系统</h1>
        </header>

        <!-- 登录界面 -->
        <div id="login-section" class="section">
            <div class="login-form">
                <h2>用户登录</h2>
                <form id="login-form">
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" id="password" required>
                    </div>
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
                <div id="login-message" class="message"></div>
            </div>
        </div>

        <!-- 主界面 -->
        <div id="main-section" class="section" style="display: none;">
            <nav class="nav">
                <button id="courses-btn" class="nav-btn active">课程列表</button>
                <button id="my-courses-btn" class="nav-btn">我的选课</button>
                <button id="profile-btn" class="nav-btn">个人信息</button>
                <button id="logout-btn" class="nav-btn">退出登录</button>
            </nav>

            <!-- 课程列表 -->
            <div id="courses-section" class="content-section">
                <div class="section-header">
                    <h2>可选课程</h2>
                    <div class="search-box">
                        <input type="text" id="search-input" placeholder="搜索课程名称或课程代码...">
                        <button id="search-btn" class="btn btn-secondary">搜索</button>
                    </div>
                </div>
                <div id="courses-list" class="courses-grid"></div>
            </div>

            <!-- 我的选课 -->
            <div id="my-courses-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h2>已选课程</h2>
                </div>
                <div id="my-courses-list" class="courses-grid"></div>
            </div>

            <!-- 个人信息 -->
            <div id="profile-section" class="content-section" style="display: none;">
                <div class="section-header">
                    <h2>个人信息</h2>
                </div>
                <div id="profile-info" class="profile-info"></div>
            </div>
        </div>
    </div>

    <!-- 选课模态框 -->
    <div id="course-modal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3 id="modal-course-name"></h3>
            <div id="modal-course-details"></div>
            <div class="modal-actions">
                <button id="confirm-select" class="btn btn-primary">确认选课</button>
                <button id="cancel-select" class="btn btn-secondary">取消</button>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>
